<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改商品</title>
    <!-- 引入axios -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <!-- 引入Vue -->
    <script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>

</head>

<body>

    <div>
        <center>
            <h1>修改商品</h1>
            <table border="1">
                <!-- redeonly设置为只读 -->
                <input type="text" v-model="p.id" placeholder="商品id" readonly>
                <input type="text" v-model="p.title" placeholder="商品标题">
                <input type="text" v-model="p.price" placeholder="商品价格">
                <input type="text" v-model="p.num" placeholder="商品库存">
                <input type="button" value="修改" @click="updata()">
            </table>
        </center>
    </div>
    <script>
        let v = new Vue({
            el: "body>div",
            data: {
                p: {
                    id: "",
                    title: "",
                    price: "",
                    num: ""
                }
            },
            methods: {
                updata() {
                    // 发出修改的异步请求
                    axios.post("/update",v.p).then(function (response) {
                        alert("修改完成!")
                        location.href="/select.html"
                    })
                }
            },
            created:function (){
                // 发请求通过id查询出商品的详情并侠士到页面中
                // location.search是拿到地址栏中?右边的内容
                axios.get("/selectById"+location.search).then(function (response){
                    // 将获取到的响应对象赋值给p;
                    v.p = response.data;
                })
            }
        })
    </script>
</body>

</html>